<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/knockoutjs.js"></script>
</head>
<body>
	<form action="" data-bind="submit:addItem">
		Add item: <input type="text" data-bind='value:itemToAdd,valueUpdate:"afterkeydown"'>
		<button type="submit" data-bind="enable:itemToAdd().length>0">Add</button>
	</form>
	<p>Your values:</p>
	<select name="" id="" multiple="multiple" height="5" data-bind="options:allItems,selectedOptions:selectedItems"></select>
	<div>
		<button data-bind="click:removeSelected,enable:selectedItems().length>0">Remove</button>
		<button data-bind="click:sortItems,enable:allItems().length>1">Sort</button>
	</div>
</body>
<script>
	var BetterListModel = function(){
		this.itemToAdd = ko.observable("");
		this.allItems = ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese","Abc"]);
		this.selectedItems = ko.observableArray(["Ham"]);

		this.addItem = function(){
			if((this.itemToAdd()!="") && (this.allItems.indexOf(this.itemToAdd()) < 0))
				this.allItems.push(this.itemToAdd());
			this.itemToAdd("");
		};

		this.removeSelected = function(){
			this.allItems.removeAll(this.selectedItems());
			this.selectedItems([]);
		};

		this.sortItems = function(){
			this.allItems.sort();
		};
	};

	ko.applyBindings(new BetterListModel());
</script>
</html>